<template>
  <div class="header">
    <el-row style="display:flex" class="container-width">
      <el-col 
        style=" display: flex; justify-content: left; align-items: center;" 
        :span="2" >
        <el-image class="logo" src="../../../src/assets/images/bg/logo.png"  @click="homePage"></el-image>
      </el-col>
      <el-col 
        style=" display: flex; justify-content: center; align-items: center;" 
        :span="5" >
        <el-image class="logo" 
          src="../../../src/assets/icons/电魂logo@2x.png" 
          style="width:auto; height:auto;">
        </el-image>
      </el-col>
    
        
      <el-col :span="17" 
        style="display:flex; justify-content: flex-end; align-items: center; "
      >

        <div  flex="main:left " 
          style="margin-right:20px; justify-content: flex-start; "
        >
          <el-badge ref="shopCar" 
            :value="loginStore.cartCount" 
            :hidden="!(loginStore.cartCount>0)"
            style="padding-right: 20px;border-right: var(--el-border-color) solid 1px;" 
          >
            <router-link :to="{name:'order-orderPay'}"
            >
              <div
                :class="curRouteName === 'order-orderPay' ? 'cur' : ''" 
                class="iconfont icon-gouwuche icon" > 
              </div>
            </router-link>
          </el-badge>


          <router-link 
            :to="{ name: 'userCenter-userCenter' }"
            :class="curRouteName === 'order-orderPay' ? 'cur' : ''" 
            style="padding-left:20px; padding-right:20px; border-right: var(--el-border-color) solid 1px;"
          >
            <el-link type="primary" size="large" :underline="false" style="font-size: var( --el-font-size-large);">
              推广大使
            </el-link>

          </router-link>

          <router-link 
            :to="{ name: 'userCenter-userCenter' }"
            :class="curRouteName === 'order-orderPay' ? 'cur' : ''" 
            style="padding-left:20px; padding-right:20px;"
          >
            <el-link type="primary" size="large" :underline="false" style="font-size: var( --el-font-size-large);">
              学习中心
            </el-link>

          </router-link>

        </div>

        <div class="login_warp" v-if="!loginStore.getAccesstoken()">
          <el-button type="primary" size="small" @click="login">请登录</el-button>
          <span class="login_Set">或</span>
          <el-button type="text" size="small" @click="register">免费注册</el-button>
        </div>


        <el-dropdown flex="main:center cross:center"
          style="display:flex; justify-content:middle; align-items:center; "
        >
          <div  flex="main:center cross:center"
            style="display:flex; justify-content:middle;align-items:center; "
          >  
            <el-avatar src="../../../src/assets/images/bg/head_icon.png"></el-avatar>
          </div>
          <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="info">个人信息</el-dropdown-item>
                  <el-dropdown-item @click.native="userlogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
          </template>

        </el-dropdown>
        
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>

import { useLoginStore, useAppStore} from "/@/store/index";
const loginStore = useLoginStore();

import router from "/@/router";
import { useRoute } from 'vue-router'

import { reactive, computed, } from 'vue'


const path = [
        { title: "首页", routeName: "homePage" },
        { title: "课程", routeName: "course" },
        { title: "会员", routeName: "vip" },
        { title: "老师", routeName: "teacher" },
        { title: "答疑", routeName: "qa" },
        { title: "活动", routeName: "activity" },
      ];
const searchText = "";
const state = "";

const register = () => {
  router.push("/register")
};
const login = () => {
  router.push('/login')
};
const homePage = () => {
  router.push('/homePage')
};

//let curRoute = this.$route;
const curRouteName = computed(()=>{
  const route = useRoute();
  return route.name;
});

const info = () => {
  router.push({ name: 'userCenter-userCenter' });
};

const userlogout = () => {
  loginStore.logOut().then((res) => {
    router.push('/');
  });
};
//     info: function () {
//       this.$router.push({ name: "userInfo" });
//     },
//     userlogout(){
//       this.$store.dispatch('user/userlogout')
//     },


// = function() {
//   //return "";
//   return curRoute.name;
// };
// routePath : function (item) {
//       this.$router.push({ name: item.routeName });
//     };

//import { mapGetters } from "vuex";

// export default {
//   data() {
//     return {
//        logo:require('../../assets/images/bg/logo.png'),
//       path: [
//         { title: "首页", routeName: "homePage" },
//         { title: "课程", routeName: "class" },
//         { title: "会员", routeName: "vip" },
//         { title: "老师", routeName: "teacher" },
//         { title: "答疑", routeName: "QA" },
//         { title: "活动", routeName: "active" },
//       ],
//       searchText: "",
//       circleUrl:require('../../assets/images/bg/head_icon.png'),
//       state:""
//     };
//   },
//   mounted(){
//     if(this.$refs.shopCar){
//          this.keepSHopPos()
//     }
 
//   },
//   computed: {
//     ...mapGetters(["messages"]),
//     curRouteName() {
    
//       return this.$route.meta.belone;
//     },
//   },
//   methods: {
//     register(){
//       this.$router.push("/register")
//     },
//     login(){
//       this.$router.push('/login')
//     },
//     querySearchAsync(){},
//     handleSelect(){},
//     keepSHopPos(){
// let pos = this.$refs.shopCar.$el.getBoundingClientRect()
//     this.$store.commit('user/SET_SHOP_CAR',pos)
//     },
//     routePath: function (item) {
//       this.$router.push({ name: item.routeName });
//     },
//     search: function () {
     
//     },
//     info: function () {
//       this.$router.push({ name: "userInfo" });
//     },
//     userlogout(){
//       this.$store.dispatch('user/userlogout')
//     },
//   },
// };

</script>

<style lang="scss" scoped>
  .header {
    height: 80px;
    position:fixed;
    width: 100%;
    z-index: 10;
    background: #26160b;
    font-size: 20px;
    color: #ffffff;
  }
  .cur {
    color: #e85900;
    font-size: 24px;
  }
  .el-row,
  .el-col {
    height: 100%;
    line-height: 80px;
    text-align: center;
  }
  .el-col {
    cursor: pointer;
  }
  .input {
    width: 240px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    color: #ffffff;
    border-radius: 20px;
    background: #26160b;
    border: 1px solid #ffffff;
    text-indent: 2em;
  }
  input:focus {
    outline: none;
  }
  .input::placeholder {
    color: #ffffff;
    font-size: 18px;
    line-height: 40px;
  }
  .icon {
    font-size: 33px;
  width: 33px;
      height: 33px;
    margin-right: 17px;
    cursor: pointer;
    position: relative;
  }
  .icon:before {
    position: absolute;
      width: 33px;
      height: 33px;
      top: -25px;
  }
  .el-avatar {
    background: #db7c41;
  }
  .logo{
    height: 70px;
  }
  .login_warp{
    text-align:right;
    margin: 0 20px 0 20px;
  }

  .login_Set{
    color:--colors-primary; //$color-primary;//$--color-primary;
    display:inline-block;
    margin: 0 6px;
    font-size: 12px;
  }

</style>